<template>
  <view>
    <!-- 顶部区域 -->
    <view class="smart-page-head">

    </view>
    
    <!-- 主体部分 -->
    <view class="smart-padding-wrap">
      <view>flex-direction:row 横向布局</view>
    </view>
    
    <!-- 横向布局容器及子项 -->
    <view class="smart-flex smart-row">
      <view class="flex-item smart-bg-blue">A</view>
      <view class="flex-item smart-bg-green">B</view>
      <view class="flex-item smart-bg-red">C</view>
    </view>
    
    <view class="smart-padding-wrap">
      <view>flex-direction:column 纵向布局</view>
    </view>
    
    <!-- 纵向布局容器及子项 -->
    <view class="smart-flex smart-column">
      <view class="flex-item-100 smart-bg-blue">A</view>
      <view class="flex-item-100 smart-bg-green">B</view>
      <view class="flex-item-100 smart-bg-red">C</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在这里定义数据
    }
  },
  methods: {
    // 可以在这里定义方法
  }
}
</script>
